<script setup lang="ts">
  import { nextTick, ref, watch } from 'vue'
  import OrderCost from '@/views/busic/base/module/order_set/components/CostCard/index.vue'
  import GoodSettle from './good-settle/Index.vue'
  import FeeStandards from './fee-standards/Index.vue'
  import { useActiveTab } from '@/services/pages/order/set'
  import { useRoute } from 'vue-router'

  const activeTab = ref('orderCost')
  const feeStandardsInstance = ref()
  const orderCostInstance = ref<InstanceType<typeof OrderCost> | null>(null)
  const goodSettleInstance = ref<InstanceType<typeof GoodSettle> | null>(null)
  const route = useRoute()

  const onTabChange = (tab: 'orderCost' | 'goodSettleSet' | 'feeStandards') => {
    nextTick(() => {
      switch (tab) {
        case 'orderCost':
          if (orderCostInstance.value) {
            orderCostInstance.value.getList()
          }
          break
        case 'feeStandards':
          if (feeStandardsInstance.value) {
            feeStandardsInstance.value.getList()
          }
          break
        case 'goodSettleSet':
          if (goodSettleInstance.value) {
            goodSettleInstance.value.getList()
          }
      }
    })
  }

  watch(
    () => route.name,
    (value) => {
      const _activeTab = useActiveTab().getFeeCostActiveTab.value
      if (
        value === 'orderSet' &&
        ['orderCost', 'goodSettleSet', 'feeStandards'].includes(_activeTab)
      ) {
        activeTab.value = _activeTab
        onTabChange(_activeTab)
      }
    },
  )
</script>

<template>
  <div class="order-cost-set">
    <el-tabs v-model="activeTab" @tab-change="onTabChange">
      <el-tab-pane label="工单费用" name="orderCost">
        <order-cost ref="orderCostInstance"></order-cost>
      </el-tab-pane>
      <el-tab-pane label="网点结算标准" name="goodSettleSet">
        <good-settle ref="goodSettleInstance"></good-settle>
      </el-tab-pane>
      <el-tab-pane label="收费标准" name="feeStandards">
        <fee-standards ref="feeStandardsInstance"></fee-standards>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
  .order-cost-set {
    height: 100%;

    :deep(.el-tabs) {
      height: 100%;

      .el-tabs__header {
        margin: 0;
      }

      .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
</style>
